<template>
	<view class="my_dangan">
		<view class="m_header">
			<changeOrgs ref="orgs" @listData="listData" :bindType="bindType"></changeOrgs>
		</view>
		<view class="d_box">
			<scroll-view :style="{height: height}" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<cardBox :dataList="userList" @jiebang="jiebang" @jumpCard="jumpCard"></cardBox>
			</scroll-view>
		</view>
		<mcModal :isShow="showMcModal" :content="content" :title="title" @cancel='bb()' :inp="false" @ok='cc()'
			okCor='#e74c3c' :okBtn='okBtn'></mcModal>

		<view class="red_packet" :class="{'show_red_packet': showRedPacket}">
			<view class="red_packet_mask"></view>
			<view class="red_packet_box big_box">
				<image class="packet_box_bg" src="../../static/images/massage/pic.jpg" mode="scaleToFill">
				</image>
				<view class="red_packet_gold" :class="{'opening': opening}" @click="_getRedPacketHandle">
					開
				</view>
			</view>
			<view class="close_icon" @click="()=>{ showRedPacket = false}">
				<image class="icon" src="../../static/images/massage/add_circle.png" mode="scaleToFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		UnStudentBindEmp,
		queryStudentCardBalance,
		getRedPacketLog
	} from '../../common/api/index.js'
	import changeOrgs from '../../components/changeOrgs.vue'
	import cardBox from '../../components/card-box.vue'
	import {
		_showLoading,
		_showToast
	} from '../../common/js/util.js'
	import mcModal from '../../components/custom-modal/custom-modal.vue'
	export default {
		data() {
			return {
				userList: [],
				height: 0,
				bindType: '0',
				content: '',
				title: '',
				showMcModal: false,
				okBtn: '',
				ite: {},
				item: {},
				showRedPacket: false,
				opening: false,
			}
		},
		components: {
			changeOrgs,
			cardBox,
			mcModal
		},
		async onLoad(option) {
			console.log(option.bindType)

			_showLoading('数据加载中...')
			let s_userId = uni.getStorageSync("s_userId");
			const result = await queryStudentCardBalance({
				userId: s_userId,
				bindType: '0'
			})
			if (result.code != 0) {
				_showToast('数据获取失败，请稍后重试')
				return
			}
			const profile = this.profile = result.data.students[0].students[0];
			//获取领取红包记录
			const res = await getRedPacketLog({
				orgId: profile.orgId,
				empId: profile.empId,
			})
			let data = [],
				amount = 0
			if (res.code == 0) {
				uni.hideLoading()
				data = res.data.filter(i => i.state != 1)
				amount = data[0].amount
			} else {
				uni.hideLoading()
				// _showToast(res.msg)
			}

			uni.hideLoading()

			if (option.bindType) this.bindType = option.bindType
			if (option.toRedpack == 1 && profile.orgId == '4514061') {
				if (data.length > 0) {
					uni.navigateTo({
						url: '../../pageMassage/myRedPacket/redPacketDetails'
					})
				} else {
					this.showRedPacket
				}
			}
		},
		onShow: function() {
			let _that = this;
			uni.getSystemInfo({
				success: function(res) {
					_that.height = res.windowHeight - 102 + 'px';
				}
			})
		},
		methods: {
			async _getRedPacketHandle() {
				this.opening = true
				let s_userId = uni.getStorageSync("s_userId");
				const result = await queryStudentCardBalance({
					userId: s_userId,
					bindType: '0'
				})
				if (result.code != 0) {
					_showToast('数据获取失败，请稍后重试')
					return
				}
				const profile = this.profile = result.data.students[0].students[0];
				const redPacket = await grabRedPacket({
					orgId: profile.orgId,
					empId: profile.empId
				})
				setTimeout(() => {
					this.opening = false
					if (redPacket.code == 0) {
						uni.hideLoading()
						this.showRedPacket = false
						uni.navigateTo({
							url: '../../pageMassage/myRedPacket/redPacketDetails' //'../../pageMassage/myRedPacket/redPacketDetails?dept=' + JSON.stringify(this.dept)
						})
					} else {
						uni.hideLoading()
						_showToast('数据获取失败，' + redPacket.msg)
					}
				}, 2000)
			},
			listData(arr, orgId) {
				this.userList = arr
			},
			jumpCard(empName, arr) {
				uni.navigateTo({
					url: '/packageCard/card/danganCard?arrObj=' + encodeURIComponent(JSON.stringify(
						arr)) + '&empName=' + empName + (this.bindType == '3' ? '&hasCash=' +
						true : '')
				})
			},
			bb() {
				this.showMcModal = false
			},
			cc() {
				this.showMcModal = false
				_showLoading('解绑中...')
				UnStudentBindEmp({
					empId: this.item.empId,
					bindType: this.ite.bindType == 0 ? 0 : 1,
					userId: uni.getStorageSync('s_userId')
				}).then(res => {
					if (res.resultCode == 0) {
						uni.hideLoading()
						_showToast('解绑成功...')
						this.$refs.orgs._queryStudentCardBalance()
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
			},
			jiebang(ite, item) {
				this.ite = ite
				this.item = item
				this.title = '温馨提示'
				this.content = '您好！解除绑定将无法使用部分功能'
				this.okBtn = '继续解绑'
				this.showMcModal = true
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgb(243, 243, 243);
		overflow: hidden;
	}

	.my_dangan {
		.m_header {
			width: 100vw;
			height: 390rpx;
			background-image: url('');
			background-size: 100%;
			background-repeat: no-repeat;
			display: flex;
			justify-content: center;
		}

		.d_box {
			padding: 0 30rpx 20rpx 30rpx;
			width: 92%;
			position: absolute;
			top: 200rpx;
		}
	}

	.red_packet {
		display: none;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;

		&.show_red_packet {
			display: block;
		}

		.red_packet_mask {
			width: 100%;
			height: 100%;
			background-color: rgba(255, 255, 255, 0.4)
		}

		.red_packet_box.big_box {
			height: 800rpx;
			width: 486rpx;
			position: absolute;
			top: 140rpx;
			left: 50%;
			margin-left: -243rpx;

			// ********* new ********
			.packet_box_bg {
				height: 800rpx;
				width: 486rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			.red_packet_gold {
				bottom: 110rpx;
				left: 50%;
				margin-left: -80rpx;
				height: 140rpx;
				width: 140rpx;
				line-height: 140rpx;
				color: #574700;
				font-size: 50rpx;
			}

			// ******** new *********
			.red_packet_top {
				top: -1200rpx;
				height: 1400rpx;
				width: 1400rpx;

				.red_packet_gold {
					bottom: -80rpx;
					left: 50%;
					margin-left: -80rpx;
					height: 160rpx;
					width: 160rpx;
					line-height: 160rpx;
					color: #574700;
					font-size: 60rpx;
				}
			}

			.red_packet_info {
				font-size: 40rpx;
			}

			.red_packet_sender {
				padding: 36rpx 0;
				font-size: 30rpx;
				color: #eac866;
			}
		}

		.close_icon {
			width: 64rpx;
			height: 64rpx;
			position: absolute;
			left: 50%;
			margin-left: -32rpx;
			bottom: 360rpx;
			transform: rotate(45deg);

			.icon {
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
</style>